<template>
	<view class="container">
		<view class="card">
			<view style="font-size: 32upx;">风险因素共{{ list.length }}项，当前<text style="font-size: 50upx;color: red;">{{ index+1 }}</text>/{{ list.length }}项</view>
			<view class="title">
				<view class="name">风险内容</view>
			</view>
			<view class="item content">
				<view>{{ list[index].content }}</view>
			</view>
			<view class="title">
				<view class="name">巡检情况</view>
			</view>
			<view class="item flex-row">
				<view class="label">巡检结果</view>
				<view class="input flex-row">
					<picker @change="changeDangerLevel" :value="dangerLevelIndex" :range="dangerLevels">
						<view class="value">{{ dangerLevels[dangerLevelIndex] }}</view>
					</picker>
					<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
				</view>
			</view>
			<view v-show="dangerMoreIndex.includes(dangerLevelIndex)">
				<view class="item flex-row" style="align-items: flex-start;">
					<view class="label">现场视图<text class="red">*</text></view>
					<view class="upload">
						<upload @upload="uploadFile" @delete="delPic" :files="pics" :count="3"></upload>
					</view>
				</view>
				<view class="item flex-row" style="align-items: flex-start;">
					<view class="label">隐患详情<text class="red">*</text></view>
					<textarea v-model="form.xc_content" placeholder="隐患详情..." />
				</view>
				<view class="item flex-row">
					<view class="label">风险等级</view>
					<view class="input flex-row" style="font-weight: bold;color: #0A98D5;">{{ riskLevels[item.fx_level - 1] }}</view>
				</view>
				<view class="item flex-row">
					<view class="label">隐患大类</view>
					<view class="input flex-row">
						<picker @change="changeDangerTopCate" :value="dangerTopIndex" :range="dangerTopCates" range-key="name">
							<view class="value">{{ dangerTopCates[dangerTopIndex] ? dangerTopCates[dangerTopIndex].name : '' }}</view>
						</picker>
						<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
					</view>
				</view>
				<view class="item flex-row">
					<view class="label">隐患小类</view>
					<view class="input flex-row">
						<picker @change="changeDangerSubCate" :value="dangerSubIndex" :range="dangerSubCates" range-key="name">
							<view class="value">{{ dangerSubCates[dangerSubIndex] ? dangerSubCates[dangerSubIndex].name : '' }}</view>
						</picker>
						<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
					</view>
				</view>
				<view class="item flex-row">
					<view class="label">整改期限</view>
					<view class="input flex-row">
						<picker @change="changeDate" :value="lastTime" :start="startDate" mode="date">
							<view class="value">{{ form.last_time }}</view>
						</picker>
						<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
					</view>
				</view>
				<view class="item flex-row">
					<view class="label">整改人</view>
					<view class="input flex-row" @click="toSelectMember">
						<input v-model="username" placeholder="选择整改人" disabled/>
						<uni-icons type="arrowright" size="16" color="#666"></uni-icons>
					</view>
				</view>
			</view>
			<view class="item btns">
				<view @click="submit" class="btn">提交并返回风险列表</view>
			</view>
		</view>
	</view>
</template>

<script>
import upload from '@/components/upload/';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import { date,isNull } from '@/common/function.js';
export default{
	components: { upload,uniIcons },
	data(){
		return {
			dangerMoreIndex: [1,2], // 更多信息巡检结果索引
			dangerLevels: ['已检查无隐患','一般事故隐患','疑似重大隐患','已存在未整改隐患'],
			dangerTopCates: [],
			dangerSubCates: [],
			dangerLevelIndex: 0,
			dangerTopIndex: 0,
			dangerSubIndex: 0,
			riskLevels: ['I','II','III','IV'],
			username: '',
			startDate: '',
			lastTime: '',
			pics: [],
			index: 0,
			list: [],
			item: {},
			form: {
				check_static: 1,	// 巡查结果1:已检查无隐患2:一般事故隐患3:疑似重大隐患4.已存在未整改隐患	
				content: '',		// 风险巡查的内容
				fx_check_id: '',	// check_id,列表ID
				pics: '',			// 照片url，多张照片之间用英文逗号分隔
				xc_content: '',		// 现场详情
				fx_level: 0,		// 风险等级
				last_time: '',		// 整改期限
				done_userid: '',	// 整改人ID
				done_username: '',	// 整改人 姓名
				cart_b: '',			// 大类  文字
				cart_s: ''			// cart_s
			}
		}
	},
	onLoad(option){
		// #ifdef APP-PLUS
		/* 隐藏凸起图标 */
		var icon = plus.nativeObj.View.getViewById("icon");
		setTimeout(function() {
			if(icon){icon.hide();}
		}, 100);
		// #endif
		
		this.index = Number.parseInt(option.index);
		this.form.done_userid = uni.getStorageSync('userid');
		this.doLastTime();
	
		// 处理数据
		this.list = uni.getStorageSync("inspectList") || [];
		if(this.list.length){
			this.item = this.list[this.index];
			
			// 判断是否已经巡检
			if(this.item.checked && this.item.check_content){
				this.form = this.item.check_content.list;
				this.dangerLevelIndex = this.form.check_static - 1;
				this.username = this.form.done_username;
				this.pics = this.form.pics.split(',');
				this.pics = this.pics.map(item=>{
					if(item.substr(0,4) == 'http') return item;
					item = this.$API.baseURL + item
					return item;
				});
				
				if(this.dangerMoreIndex.includes(this.dangerLevelIndex)){
					this.getCategory();
				}
			}else{
				this.form.fx_check_id = this.item.check_id;
				this.form.content = this.item.content;
				this.form.fx_level = this.item.fx_level;
			}
		}
	},
	onShow(){
		// 整改人处理
		if(this.dangerMoreIndex.includes(this.dangerLevelIndex)){
			let jobTicketRectCheckedList = uni.getStorageSync('jobTicketRectCheckedList') || [];
			if(jobTicketRectCheckedList[0]){
				this.username = jobTicketRectCheckedList[0].name;
				this.form.done_userid = jobTicketRectCheckedList[0].id;
			}
		}
	},
	methods: {
		toPage(url){
			if(url) uni.navigateTo({url});
		},
		// 处理整改期限
		doLastTime(){
			let { year, month, day, hours, minutes } = date();
			this.startDate = `${year}-${month}-${day}`;
			this.lastTime = `${year}-${month}-${day+1}`;
			this.form.last_time = `${this.lastTime} 23:59:59`;
		},
		// 切换日期
		changeDate(e){
			this.lastTime = e.detail.value;
			this.form.last_time = `${this.lastTime} 23:59:59`;
		},
		// 切换隐患等级
		changeDangerLevel(e){
			this.dangerLevelIndex = e.detail.value;
			this.form.check_static = this.dangerLevelIndex + 1;
			
			if(this.dangerMoreIndex.includes(this.dangerLevelIndex)){
				this.getCategory();
				this.getUserDetail();
			}else{
				this.username = '';
				this.form.cart_b = '';
				this.form.cart_s = '';
				this.form.done_userid = '';
			}
		},
		// 切换大类
		changeDangerTopCate(e){
			this.dangerTopIndex = e.detail.value;
			let { id, name } = this.dangerTopCates[this.dangerTopIndex];
			this.form.cart_b = name;
			this.getCategory(id, 'under');
		},
		// 切换小类
		changeDangerSubCate(e){
			this.dangerSubIndex = e.detail.value;
			let { id, name } = this.dangerSubCates[this.dangerSubIndex];
			this.form.cart_s = name;
		},
		// 选择整改人
		toSelectMember(){
			uni.navigateTo({
				url: '../memberRect'
			})
		},
		// 删除图片
		delPic(res){
			this.pics = this.pics.filter((item,idx)=>res.index != idx);
		},
		//上传图片
		uploadFile(res){
			let _this = this;
			res.temps.forEach(function(item,index){
				uni.uploadFile({
					url: _this.$API.upload,
					name: 'file',
					filePath: item,
					success: function(res) {
						let data = JSON.parse(res.data);
						_this.pics.push(data.fileName);
					},
					fail: function(res) {
						uni.showToast({
							title:"上传失败",
							icon:'none'
						})
					}
				});
			})
		},
		// 获取隐患分类
		getCategory(p_id=0, type='top'){
			let _this = this;
			uni.request({
				url: this.$API.getDangerCartBy,
				data: { p_id, type },
				header: this.$API.get_head(),
				success: (res)=>{
					let data = res.data.data;
					if(type == 'top'){
						_this.dangerTopCates = data;
						if(data[_this.dangerTopIndex]){
							let { id,name } = data[_this.dangerTopIndex];
							_this.getCategory(id, 'under');
							
							// 设置选中项索引
							if(_this.dangerMoreIndex.includes(_this.dangerLevelIndex)){
								_this.dangerTopCates.forEach((item, index)=>{
									if(item.name == _this.form.cart_b)
										_this.dangerTopIndex = index;
								});
							}else{
								_this.form.cart_b = name;
							}
						}
					}
					if(type == 'under'){
						_this.dangerSubCates = data;
						if(data[_this.dangerSubIndex]){
							// 设置选中项索引
							if(_this.dangerMoreIndex.includes(_this.dangerLevelIndex)){
								_this.dangerSubCates.forEach((item, index)=>{
									if(item.name == _this.form.cart_s)
										_this.dangerSubIndex = index;
								});
							}else{
								_this.form.cart_s = data[_this.dangerSubIndex].name;
							}
						}
					}
				}
			});
		},
		//获取用户信息
		getUserDetail(){
			let _this = this;
			uni.request({
				url: this.$API.getUserDetail,
				method:"POST",
				data:{ userid: uni.getStorageSync('userid')},
				header:this.$API.get_head(),
				success: (res) => {
					_this.username = res.data.data.NAME;
				}
			})
		},
		// 隐患提交
		submit(){
			let _this = this;
			// 数据校验
			if(this.dangerMoreIndex.includes(this.dangerLevelIndex)){
				if(this.pics.length == 0){
					return uni.showToast({icon: 'none', title: '请上传现场视图'})
				}
				if(isNull(this.form.xc_content)){
					return uni.showToast({icon: 'none', title: '请输入隐患描述'})
				}
			}
			
			// 处理图片数据
			this.form.pics = this.pics.join(',');
			this.form.done_username = this.username;
			
			// 更新缓存数据
			this.list[this.index].checked = true;
			this.list[this.index].check_content = {list: {}};
			this.list[this.index].check_content.list = JSON.parse(JSON.stringify(this.form));
			uni.removeStorageSync('jobTicketRectCheckedIds');
			uni.removeStorageSync('jobTicketRectCheckedList');
			uni.setStorageSync('inspectList', this.list);
			uni.navigateBack();
		},
	}
}
</script>

<style scoped>
.red{
	color: red;
	font-weight: bold;
}
textarea{
	width: calc(100% - 160upx);
	height: 120upx;
	font-size: 28upx;
	background: #F2F2F2;
	padding: 12upx 18upx;
	border-radius: 12upx;
}
.upload{
	width: calc(100% - 160upx);
}
picker{
	width: calc(100% - 40upx);
	height: 68upx;
	line-height: 68upx;
}
	
.card{
	margin: 20upx;
	border-radius: 12upx;
	background: #fff;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view.name{
	height: 60upx;
	font-size: 30upx;
	text-indent: 24upx;
	font-weight: bold;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item{
	margin-bottom: 20upx;
}
.card .item.content{
	border: 4upx dotted red;
	border-radius: 10upx;
	padding: 12upx;
}
.card .item.content view{
	line-height: 1.2;
	font-size: 34upx;
}
.card .item .label{
	width: 160upx;
}
.card .item .input{
	width: calc(100% - 160upx);
	height: 68upx;
	line-height: 68upx;
	padding: 0 20upx;
	background: #F2F2F2;
	border-radius: 12upx;
	box-sizing: border-box;
}
.card .item  input,
.card .item .value{
	height: 68upx;
	line-height: 68upx;
	font-size: 28upx;
}
.card .item.btns .input{
	padding: 0;
	background: none;
}
.btn{
	color: #fff;
	width: 300upx;
	height: 52upx;
	font-size: 26upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	margin: 30upx auto 0;
	background-color: red;
}
</style>
